<!DOCTYPE html>
<html>
  <head>
    <title>Test Scroll & Filter Demo</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
        background: var(--bg-primary, #ffffff);
        color: var(--text-primary, #000000);
      }

      /* CSS Variables for Dark/Light Mode */
      :root {
        --bg-primary: #ffffff;
        --bg-secondary: #f5f5f5;
        --text-primary: #000000;
        --text-secondary: #666666;
        --border-color: #dddddd;
        --accent-color: #2196f3;
      }

      [data-theme="dark"] {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --text-primary: #ffffff;
        --text-secondary: #cccccc;
        --border-color: #444444;
        --accent-color: #64b5f6;
      }

      .theme-toggle {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 10px;
        background: var(--accent-color);
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
      }

      .demo-container {
        max-width: 400px;
        margin: 0 auto;
        background: var(--bg-secondary);
        border-radius: 10px;
        padding: 20px;
        border: 1px solid var(--border-color);
      }

      /* Filter Styles */
      .filter-section {
        margin-bottom: 20px;
        padding: 12px;
        background: var(--bg-secondary);
        border-radius: 8px;
        border: 1px solid var(--border-color);
        transition: all 0.2s ease;
      }

      .filter-row {
        display: flex;
        gap: 10px;
        align-items: center;
      }

      .filter-input {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 13px;
        background: var(--bg-primary);
        color: var(--text-primary);
        transition: all 0.2s ease;
      }

      .filter-input:focus {
        outline: none;
        border-color: var(--accent-color);
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
      }

      .filter-input::placeholder {
        color: var(--text-secondary);
      }

      .filter-select {
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 13px;
        background: var(--bg-primary);
        color: var(--text-primary);
        cursor: pointer;
        min-width: 140px;
        transition: all 0.2s ease;
      }

      .filter-select:focus {
        outline: none;
        border-color: var(--accent-color);
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
      }

      .filter-select option {
        background: var(--bg-primary);
        color: var(--text-primary);
        padding: 8px;
      }

      /* Scrollable List */
      .scrollable-list {
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        background: var(--bg-primary);
        padding: 8px;
      }

      .scrollable-list::-webkit-scrollbar {
        width: 8px;
      }

      .scrollable-list::-webkit-scrollbar-track {
        background: var(--bg-secondary);
        border-radius: 4px;
      }

      .scrollable-list::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 4px;
        transition: background 0.2s ease;
      }

      .scrollable-list::-webkit-scrollbar-thumb:hover {
        background: var(--accent-color);
      }

      .list-item {
        padding: 12px;
        margin: 4px 0;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        transition: all 0.2s ease;
        cursor: pointer;
      }

      .list-item:hover {
        border-color: var(--accent-color);
        background: var(--bg-primary);
      }

      .item-name {
        font-weight: bold;
        color: var(--text-primary);
      }

      .item-status {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 4px;
      }

      .count {
        color: var(--text-secondary);
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <button class="theme-toggle" onclick="toggleTheme()">
      🌓 Toggle Theme
    </button>

    <div class="demo-container">
      <h2>Filter & Scroll Demo</h2>

      <!-- Filter Section -->
      <div class="filter-section">
        <div class="filter-row">
          <input
            type="text"
            id="filterInput"
            placeholder="Filter by name or status..."
            class="filter-input"
          />
          <select id="statusFilter" class="filter-select">
            <option value="">All Status</option>
            <option value="free">Free</option>
            <option value="pro trial">Pro Trial</option>
            <option value="pro plan">Pro Plan</option>
            <option value="business">Business</option>
          </select>
        </div>
      </div>

      <div>
        <strong>Items <span id="itemCount" class="count">(0)</span></strong>
      </div>

      <!-- Scrollable List -->
      <div id="itemsList" class="scrollable-list">
        <!-- Items will be populated here -->
      </div>

      <button
        onclick="generateItems()"
        style="margin-top: 15px; padding: 8px 16px"
      >
        Generate Test Items
      </button>
    </div>

    <script>
      // Theme toggle
      function toggleTheme() {
        const currentTheme =
          document.documentElement.getAttribute("data-theme");
        const newTheme = currentTheme === "dark" ? "light" : "dark";
        document.documentElement.setAttribute("data-theme", newTheme);
      }

      // Test data
      const testItems = [
        { name: "User1", status: "free" },
        { name: "User2", status: "pro trial" },
        { name: "User3", status: "pro plan" },
        { name: "User4", status: "business" },
        { name: "User5", status: "free" },
        { name: "User6", status: "pro trial" },
        { name: "User7", status: "pro plan" },
        { name: "User8", status: "free" },
        { name: "User9", status: "business" },
        { name: "User10", status: "pro trial" },
        { name: "TestAccount1", status: "free" },
        { name: "TestAccount2", status: "pro plan" },
        { name: "DemoUser1", status: "business" },
        { name: "DemoUser2", status: "free" },
        { name: "AdminUser", status: "pro trial" },
      ];

      let allItems = [];

      function generateItems() {
        allItems = [...testItems];
        // Add more items for scroll testing
        for (let i = 11; i <= 30; i++) {
          const statuses = ["free", "pro trial", "pro plan", "business"];
          allItems.push({
            name: `Account${i}`,
            status: statuses[Math.floor(Math.random() * statuses.length)],
          });
        }
        updateList();
      }

      function updateList() {
        const list = document.getElementById("itemsList");
        const count = document.getElementById("itemCount");

        list.innerHTML = "";

        const filtered = filterItems();

        filtered.forEach((item) => {
          const div = document.createElement("div");
          div.className = "list-item";
          div.innerHTML = `
                    <div class="item-name">${item.name}</div>
                    <div class="item-status">${item.status}</div>
                `;
          list.appendChild(div);
        });

        count.textContent = `(${filtered.length}/${allItems.length})`;
      }

      function filterItems() {
        const searchTerm = document
          .getElementById("filterInput")
          .value.toLowerCase();
        const statusFilter = document.getElementById("statusFilter").value;

        return allItems.filter((item) => {
          const matchesSearch =
            !searchTerm ||
            item.name.toLowerCase().includes(searchTerm) ||
            item.status.toLowerCase().includes(searchTerm);

          const matchesStatus = !statusFilter || item.status === statusFilter;

          return matchesSearch && matchesStatus;
        });
      }

      // Event listeners
      document
        .getElementById("filterInput")
        .addEventListener("input", updateList);
      document
        .getElementById("statusFilter")
        .addEventListener("change", updateList);

      // Initialize
      generateItems();
    </script>
  </body>
</html>
